<template>
  <div>
    <el-table :data="list">
      <!-- <el-table-column label="" prop="goodName" type="selection" width="50" /> -->
      <el-table-column label="商品信息" prop="goodName">
        <template slot-scope="{ row }">
          <div style="display: flex; align-items: center">
            <div style="margin-right: 10px">
              <image-preview :src="row.goodImg" :width="60" :height="40" />
            </div>
            <div>{{ row.goodName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="goodCount" />
      <!-- <el-table-column label="售后状态" prop="goodName" /> -->
      <el-table-column label="状态" prop="orderStatus">
        <template slot-scope="{ row }">
          {{ forrmatterEnmu(orderStatus, row.orderStatus) }}
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-tag type="warning" size="mini">物流信息</el-tag>
      <span style="color: red; margin: 0 0 0 10px"
        >*注：物流修改仅支持修改一次</span
      >
    </div>
    <el-row>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="100px"
        :inline="true"
      >
        <el-col :span="24" :offset="0">
          <el-form-item label="发货方式：">
            <el-radio v-model="form.deliveryType" label="1">普通配送</el-radio>
            <el-radio v-model="form.deliveryType" label="2">加急配送</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="快递公司：" prop="logisticsCompany">
            <el-input v-model="form.logisticsCompany"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="快递单号：" prop="lId">
            <el-input v-model="form.lId" style="width: 150%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="收货信息"></el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="收货人：">{{ info.receiveName }}</el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="联系电话：">{{
            info.receivePhonenum
          }}</el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="收货地址：">{{
            info.receiveAddress
          }}</el-form-item>
        </el-col>
        <el-col :span="24" :offset="20">
          <el-form-item>
            <el-button
              @click="
                () => {
                  this.$emit('close');
                }
              "
              >取消</el-button
            >
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { updateOrder } from "@/api/system/order/manage";
import { forrmatterEnmu } from "@/utils/index";
export default {
  name: "ExpressInfo",
  props: ["info", "list"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodId: null,
      },
      form: {
        deliveryType: "1",
      },
      rules: {
        lId: [
          {
            required: true,
            message: "快递单号不能为空",
            trigger: "blur",
          },
        ],
      },
      orderStatus: [
        {
          name: "待发货",
          value: 1,
        },
        {
          name: "配送中",
          value: 2,
        },
        {
          name: "待收货",
          value: 3,
        },
        {
          name: "已完成",
          value: 4,
        },
        {
          name: "已退单",
          value: 5,
        },
        {
          name: "已关闭",
          value: 6,
        },
      ],
    };
  },
  created() {
    // let data = JSON.parse(JSON.stringify(this.info));
    // this.form = {
    //   ...this.form,
    //   logisticsCompany: data.logisticsCompany,
    //   lId: data.logisticsCompany,
    // };
  },
  methods: {
    forrmatterEnmu,
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.form,
            orderStatus: 2,
            id: this.info.id,
            sendTime: this.$dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss"),
          };
          updateOrder(params).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("发货成功");
              this.$emit("close");
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.base-title {
  font-size: 18rpx;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  &::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background: #1777ff;
    border-radius: 3px;
    margin-right: 8px;
  }
}
</style>
